<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="dialogTitle"
    size="1000"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="选择预设考核"
        class="label-right-align"
        label-width="120px"
      >
        <el-select
          placeholder="输入标题筛选"
          filterable
          style="width: 300px"
          v-model="tpl_id"
        >
          <el-option
            v-for="item in tplOption"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="标题"
        prop="title"
        class="required label-right-align"
        label-width="120px"
      >
        <el-input
          v-model="formData.title"
          type="text"
          clearable
          :style="{ width: '300px' }"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="内容"
        prop="content"
        class="required label-right-align"
        label-width="120px"
      >
        <Uediter
          v-model="formData.content"
          :config="ueditor.config"
          ref="ue"
        ></Uediter>
      </el-form-item>
      <el-form-item
        label="周期"
        prop="examine_date"
        class="required label-right-align"
        label-width="120px"
      >
        <el-date-picker
          v-model="formData.examine_date"
          type="daterange"
          range-separator="到"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import {
  addApi,
  addExamineApi,
  editApi,
  getInfoApi,
  getListAPi,
} from "@/api/company/examine";
import Uediter from "@/components/UE.vue";
const dialogFormVisible = ref(false);
const formRef = ref(null);
const dialogTitle = ref("添加考核");
const ue = ref<any>(null);
/*富文本框配置*/
const ueditor = ref({
  text: "",
  config: {
    initialFrameWidth: 800,
    initialFrameHeight: 400,
  },
});
const tpl_id = ref("");
const tplOption = ref<any[]>([]);
watch(tpl_id, (val: any) => {
  let tpl = tplOption.value.find((item) => item.id == val);
  formData.value.title = tpl.title;
  formData.value.content = tpl.content;
});
const formData = ref({
  user_id: 0,
  title: "",
  content: "",
  examine_date: [],
});

const rules = reactive({
  title: [
    {
      required: true,
      message: "请输入标题",
    },
  ],
  content: [
    {
      required: true,
      message: "请输入内容",
    },
  ],
  examine_date: [
    {
      required: true,
      message: "请选择周期",
    },
  ],
});
const contentChangeFunc = (e) => {
  formData.value.content = e;
};

function submitForm() {
  formRef.value.validate().then(() => {
    addExamineApi(formData.value).then((res: any) => {
      ElMessage({
        message: "添加成功",
        type: "success",
      });
      dialogClose();
    });
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (id: number, dp_id: number) => {
  dialogFormVisible.value = true;
  formData.value.user_id = id;
  getListAPi({
    department_id: dp_id,
  }).then((res: any) => {
    console.log(res);
    tplOption.value = res.data.data;
  });
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    user_id: 0,
    title: "",
    content: "",
    examine_date: [],
  };
  dialogFormVisible.value = false;
};
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
